import React, { Component } from 'react';
import BaseComponent from '@/components/BaseComponent';
import { defDrawerWidth } from '@/defaultSettings';
import { Descriptions, Drawer, Tabs } from 'antd';
import styles from './index.less';
import ProductionwasteList from '@/pages/Devices/monitor/list';

const { TabPane } = Tabs;

/**
 * 预览视图
 */
class PreviewView extends BaseComponent {
  constructor(props) {
    super(props);
    this.state = {
      activeKey: '1',
    };
  }

  render() {
    const { onClose, visible = false, record } = this.props;
    return (
      <Drawer
        title="智能锁信息预览"
        placement="right"
        width={defDrawerWidth}
        closable={true}
        onClose={e => {
          if (onClose) {
            onClose(e);
          }
        }}
        visible={visible}
      >
        {this.state.activeKey == '1' ? (
          <Descriptions bordered column={2}>
            <Descriptions.Item label="企业名称">{record.enterpriseName}</Descriptions.Item>
            <Descriptions.Item label="法人代表">{record.frRepr}</Descriptions.Item>
            <Descriptions.Item label="联系方式">{record.phone}</Descriptions.Item>
            <Descriptions.Item label="地址">{record.address}</Descriptions.Item>
            <Descriptions.Item label="企业类型">{record.enterpriseType}</Descriptions.Item>
            <Descriptions.Item label="url">{record.url}</Descriptions.Item>
          </Descriptions>
        ) : null}

        {this.state.activeKey == '2' ? (
          <ProductionwasteList companyId={record['id']}></ProductionwasteList>
        ) : null}
      </Drawer>
    );
  }

  handleTabOnChange = key => {
    this.setState({
      activeKey: key,
    });
  };
}

export default PreviewView;
